<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>员工管理</title>
    <#include "../common/link.ftl">
    <script>
        $(function () {
            // 获取全选选项的状态,设置到table列表中的所有选项
            $("#allcb").click(function () {
                // 通过事件源获取全选选项的状态
                $(".cb").prop('checked',$(this).prop('checked'))
            })

            // 获取列表中被勾选的数量,如果等于列表中的全部则把全选选项选中,否则不选中
            $(".cb").click(function () {
                $("#allcb").prop('checked',$(".cb:checked").length == $(".cb").length)
            })

            // 删除按钮
            $(".btn-delete").click(function () {
                var id = $(this).data("id")
                //提示确认框
                $.messager.confirm("警告","是否确认删除员工:"+ $(this).data("name") +"?",function () {
                    //发送ajax请求
                    $.get('/employee/delete.do',{id:id},handlerMessage)
                })
            })

            // 批量删除
            $(".btn-batchDelete").click(function () {
                // 获取选中的数据
                var cbs = $(".cb:checked");
                // 判断如果数量为0,提示未选中
                if(cbs.length == 0){
                    $.messager.alert("警告","请先选中要删除的数据!");
                    // 结束方法
                    return;
                }

                // 定义ids封装选中的员工的id
                var ids = [];
                // 遍历选中的数据
                $.each(cbs,function (index, ele) {
                    // 获取自定义属性data-id封装的员工id,存入数组
                    ids.push($(ele).data('id'));
                })
                // 如果有,提示确认框是否删除
                // 直接提交ids数组(参数名带有[]),在commonAll.js中处理了
                $.messager.confirm("警告","请确认是否进行删除?",function () {
                    $.post('/employee/batchDelete.do',{ids:ids},handlerMessage)
                })
            })

            //导入按钮
            $(".btn-import").click(function () {
                $("#importModal").modal('show');
                //模态框中的保存按钮
                $(".btn-submit").click(function () {
                    //发送异步请求提交表单
                    $("#importForm").ajaxSubmit(handlerMessage);
                })
            })

        })
    </script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <#include "../common/navbar.ftl">
    <!--菜单回显-->
    <#--<c:set var="currentMenu" value="employee"/>-->
    <#assign currentMenu="employee"/>
    <#include "../common/menu.ftl">
    <div class="content-wrapper">
        <section class="content-header">
            <h1>员工管理</h1>
        </section>
        <section class="content">
            <div class="box">
                <!--高级查询--->
                <div style="margin: 10px;">
                    <form class="form-inline" id="searchForm" action="/employee/list.do" method="post">
                        <input type="hidden" name="currentPage" id="currentPage" value="1">
                        <div class="form-group">
                            <label for="keyword">关键字:</label>
                            <input type="text" class="form-control" id="keyword" name="keyword" value="${(qo.keyword)!}" placeholder="请输入姓名/邮箱">
                        </div>
                        <div class="form-group">
                            <label for="dept"> 部门:</label>
                            <select class="form-control" id="dept" name="deptId">
                                <option value="-1">全部</option>
                                    <#list departments! as d>
                                        <option value="${(d.id)!}">${(d.name)!}</option>
                                    </#list>
                            </select>
                            <script>
                                $("#dept option[value='${(qo.deptId)!}']").prop("selected", true);
                            </script>
                        </div>
                        <button id="btn_query" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> 查询</button>
                        <a href="/employee/input.do" class="btn btn-success btn_redirect">
                            <span class="glyphicon glyphicon-plus"></span> 添加
                        </a>
                        <a href="#" class="btn btn-danger btn-batchDelete">
                            <span class="glyphicon glyphicon-trash"></span> 批量删除
                        </a>
                        <a href="/employee/exportXls.do" class="btn btn-warning" >
                            <span class="glyphicon glyphicon-download"></span> 导出
                        </a>
                        <a class="btn btn-warning btn-import">
                            <span class="glyphicon glyphicon-upload"></span> 导入
                        </a>
                    </form>
                </div>
                <table class="table table-hover table-bordered">
                    <thead>
                    <tr>
                        <th><input type="checkbox" id="allcb"></th>
                        <th>编号</th>
                        <th>名称</th>
                        <th>email</th>
                        <th>年龄</th>
                        <th>部门</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <#--<c:forEach items="${pageResult.data}" var="employee" varStatus="vs">-->
                    <#list (pageResult.list)! as employee>
                        <tr>
                            <td><input type="checkbox" class="cb" data-id="${(employee.id)!}"></td>
                            <td>${employee_index+1}</td>
                            <td>${(employee.name)!}</td>
                            <td>${(employee.email)!}</td>
                            <td>${(employee.age)!}</td>
                            <td>${(employee.dept.name)!}</td>
                            <td>${employee.state?string('正常', '冻结')}</td>
                            <td>
                                <a href="/employee/input.do?id=${(employee.id)!}" class="btn btn-info btn-xs btn_redirect">
                                    <span class="glyphicon glyphicon-pencil"></span> 编辑
                                </a>
                                <a class="btn btn-danger btn-xs btn-delete"
                                   data-id = '${(employee.id)!}'
                                   data-name ='${(employee.name)!}' >
                                    <span class="glyphicon glyphicon-trash"></span> 删除
                                </a>
                                <#--超级管理员才显示的按钮-->
                                <@shiro.hasRole name="admin">
                                    <#--根据账号状态显示的按钮超管不显示-->
                                    <#if (employee.state)! && !(employee.admin)!>
                                    <a data-id = '${(employee.id)!}'
                                       class="btn btn-danger btn-xs btn-state"
                                       data-name ='${(employee.name)!}'>冻结用户</a>
                                    </#if>
                                    <#if !employee.state  && !(employee.admin)!>
                                    <a data-id = '${(employee.id)!}'
                                       class="btn btn-info btn-xs btn_redirect btn-state"
                                       data-name ='${(employee.name)!}'>恢复用户</a>
                                    </#if>

                                    <a class="btn-resetPassword" data-id="${(employee.id)!}" data-name="${(employee.name)!}">
                                        <span class="glyphicon glyphicon-trash"></span> 重置密码
                                    </a>
                                </@shiro.hasRole>
                                <#--</c:if>-->
                            </td>
                        </tr>
                    </#list>
                    <#--</c:forEach>-->
                </table>
                <!--分页-->
                <#include "../common/page.ftl">
            </div>
        </section>
    </div>
    <#include "../common/footer.ftl">
</div>
<script>
    $(function () {
        // 重置密码
        $('.btn-resetPassword').click(function () {
            // 清空模态框
            $("#resetPasswordModal input").val('');
            // 给重置回显数据(id隐藏)
            $("#resetPasswordForm input[name=id]").val($(this).data("id"));
            $(".resetname").text("您正在重置员工" + $(this).data("name") + "的密码");
            // 点击时弹出模态框
            $('#resetPasswordModal').modal('show');
        });
        $('#btn-resetPassword').click(function () {
            //点击提交按钮
            //ajaxSubmit方法可以把表单转为异步的表单，马上提交
            $('#resetPasswordForm').ajaxSubmit(handlerMessage);
        })

        //状态按钮
        $(".btn-state").click(function () {
            var id = $(this).data("id");
            $.messager.confirm("警告","是否确认" + $(this).text() + $(this).data("name") +"?",function () {
                //发送请求
                window.location.href = '/user/state.do?id=' + id + "&currentPage=" + ${(pageResult.pageNum)!};
            })
        })
    })
</script>
<div>
    <div>
    <#-- 重置密码模态框 -->
        <div class="modal fade" id="resetPasswordModal" tabindex="-1" role="dialog" aria-labelledby="resetPasswordModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="resetPasswordModalLabel">重置密码</h4>
                    </div>

                    <form class="form-horizontal" method="post" id="resetPasswordForm" action="/passwordManagement/reset.do">
                        <input type="hidden"  name="id">
                        <div class="form-group" style="text-align: center;">
                            <h3 class="resetname"></h3>
                        </div>
                        <div class="form-group" style="margin-top: 10px;">
                            <label for="sn" class="col-sm-3 control-label">新密码：</label>
                            <div class="col-sm-6">
                                <input type="password" class="form-control"  name="newPassword"
                                       placeholder="请输入新密码">
                            </div>
                        </div>
                    </form>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button id="btn-resetPassword"  class="btn btn-primary">确定重置</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <#--导入按钮模态框-->
    <div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">导入</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" action="/employee/importXls.do" method="post" id="importForm">
                        <input type="hidden" name="id">
                        <div class="form-group" style="margin-top: 10px;">
                            <label for="name" class="col-sm-3 control-label"></label>
                            <div class="col-sm-6">
                                <input type="file" name="file">
                            </div>
                        </div>
                        <div class="form-group" style="margin-top: 10px;">
                            <div class="col-sm-3"></div>
                            <div class="col-sm-6">
                                <a href="/xlstemplates/employee_import.xls" class="btn btn-success" >
                                    <span class="glyphicon glyphicon-download"></span> 下载模板
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary btn-submit">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<#-- 引入密码模态框 -->
<#include "../changePassword.ftl">
</body>
</html>
